/**
 * Created by Administrator on 2017/7/17.
 */

import React,{Component} from 'react'
import {View,FlatList,Text,TouchableHighlight,ScrollView,TouchableOpacity,Image} from 'react-native'

import RequestUrl from '../Common/Constant'
import RequestUtils from '../Common/NetUtils'

export default class CateGory extends Component{
    static navigationOptions = ({navigation}) =>({
            title:'分类',
            headerStyle:{
                elevation:0
            }
    })

    constructor(props) {
        super(props)
        this.state={
            leftSelectPosition:0,
            leftData :[],
            rightData:[]
        }
    }


    render(){
        return(
            <View style={{flexDirection:'row',backgroundColor:'#fff',height:'100%'}}>
                <FlatList  style={{width:'25%',backgroundColor:'#fff'}}
                           data={this.state.leftData}
                           keyExtractor={this._keyExtractor}
                           extraData={this.state}
                           renderItem = {({item,index}) =>this.customLeft(item,index)}/>

                <FlatList  style={{width:'75%',backgroundColor:'#fff'}}
                           data={this.state.rightData}
                           keyExtractor={this._keyExtractor}
                           numColumns={3}
                           renderItem = {({item}) =>this.customRight(item)}/>
            </View>
        )
    }

    customLeft (item,index){
        let SubView = (this.state.leftSelectPosition == index)?this.customLeftSelect(item,index):this.customLeftNormal(item,index)
        return(
            SubView
        )
    }

    customLeftNormal(item,index){
        return(
        <TouchableHighlight onPress={()=>{this.setState({leftSelectPosition:index,rightData:this.state.leftData[index].shopTweClasses})}}>
            <View style={{width:'100%',height:55,backgroundColor:'#E9E9E9',justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:16,color:'#333333'}} >{item.name}</Text>
            </View>
        </TouchableHighlight>

        )
    }

    customLeftSelect(item,index){
        return(
            <TouchableHighlight onPress={()=>{this.setState({leftSelectPosition:index,rightData:this.state.leftData[index].shopTweClasses})}}>
            <View style={{width:'100%',borderLeftWidth :4,borderLeftColor:'#40CCCB',height:55,backgroundColor:'#fff',justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:16,color:'#40CCCB'}} >{item.name}</Text>
            </View>
            </TouchableHighlight>
        )
    }

    customRight(item){
        return(
            <TouchableOpacity style={{width:'30%',height:116,alignItems:'center',flexDirection:'column'}}
                              onPress={()=>this.props.navigation.navigate('cateGory')}>
                <Image style={{width:52,height:52,marginTop:24}} source={{uri:item.urlImg}}/>
                <Text>{item.name}</Text>
            </TouchableOpacity>


        )
    }

    componentDidMount() {
        this._fetchData();
    }

    _fetchData(){
        RequestUtils.getData('http://sharebox.wenweikeji.com/api/home/getShopClass','',(result)=>{
            this.setState({leftData:result.data,rightData:result.data[0].shopTweClasses})
        })
    }
}
